@import models.Tables.BgannoRow
@import models.Tables.BgcdsRow
@import models.Tables.BgpepRow
@import models.Tables.GeneRow
@(x: (BgannoRow, BgcdsRow, BgpepRow, GeneRow))
@bgAnno = @{
	x._1
}
@bgCds = @{
	x._2
}
@bgPep = @{
	x._3
}
@gene = @{
	x._4
}
@main("Detail-CBGD") {
	<style>
			th {
				width: 20%;
			}

	</style>
	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Detail info</h2>
		</div>
	</div>
	<div class="table-responsive">
		<table class="table table-striped table-hover table-bordered" style="table-layout: fixed;
			word-wrap: break-word">
			<tbody>
				<tr>
					<th>Gene ID</th>
					<td>
					@bgAnno.geneid
					</td>
				</tr>
				<tr>
					<th>Chr</th>
					<td>
					@bgAnno.chr
					</td>
				</tr>
				<tr>
					<th>Start</th>
					<td>
					@bgAnno.start
					</td>
				</tr>
				<tr>
					<th>End</th>
					<td>
					@bgAnno.end
					</td>
				</tr>
				<tr>
					<th>Dir</th>
					<td>
					@bgAnno.dir
					</td>
				</tr>
				<tr>
					<th>Go Bp</th>
					<td>
					@bgAnno.gobp
					</td>
				</tr>
				<tr>
					<th>Go Cc</th>
					<td>
					@bgAnno.gocc
					</td>
				</tr>
				<tr>
					<th>Go Mf</th>
					<td>
					@bgAnno.gomf
					</td>
				</tr>
				<tr>
					<th>KEGG</th>
					<td>
					@bgAnno.kegg
					</td>
				</tr>
				<tr>
					<th>Ipr</th>
					<td>
					@bgAnno.ipr
					</td>
				</tr>
				<tr>
					<th>Inter Pro</th>
					<td>
					@bgAnno.interpro
					</td>
				</tr>
				<tr>
					<th>Go Planet</th>
					<td>
					@bgAnno.goplant
					</td>
				</tr>
				<tr>
					<th>KEGG Planet</th>
					<td>
					@bgAnno.keggplant
					</td>
				</tr>
				<tr>
					<th>Nr ID</th>
					<td>
					@bgAnno.nrid
					</td>
				</tr>
				<tr>
					<th>Nr</th>
					<td>
					@bgAnno.nr
					</td>
				</tr>
				<tr>
					<th>Cds</th>
					<td>
						>@(bgAnno.geneid)<br>
					@bgCds.cds
					</td>
				</tr>
				<tr>
					<th>Pep</th>
					<td>
						>@(bgAnno.geneid)<br>
					@bgPep.pep
					</td>
				</tr>

				<tr>
					<th>Gene</th>
					<td>
						>@(gene.geneid)<br>
					@gene.seq
					</td>
				</tr>

			</tbody>
		</table>
	</div>

	<div class="well" role="alert">
		<div id="charts"></div>
	</div>

	<script>
			$(function () {
				$("#charts").html("<img src='/assets/images/loading.gif'/>");
				var id = "@bgAnno.geneid"
				$.ajax({
					url: "@routes.GenomeBrowseController.boxPlotByGeneId(bgAnno.geneid)",
					type: "get",
					dataType: "json",
					success: function (data) {
						$("#charts").highcharts({
							credits: {
								enabled: false
							},
							chart: {
								type: 'boxplot',
								height: 550,
								marginTop: 40,
								marginBottom: 80
							},
							title: {
								text: "@bgAnno.geneid"
							},
							legend: {
								enabled: false
							},
							xAxis: {
								labels: {
									style: {
										fontSize: '12px',
										fontFamily: 'Arial, sans-serif'
									}
								},
								categories: data.tissue,
								title: {
									text: 'Groups '
								}
							},
							yAxis: {
								title: {
									text: 'Expression (FPKM)'
								},
								min: 0
							},
							labels: {
								style: {
									color: "black",
									fontSize: '16px',
									fontWeight: 'normal'
								},
							},
							plotOptions: {
								boxplot: {
									fillColor: '#F0F0E0',
									lineWidth: 2,
									medianColor: '#0C5DA5',
									medianWidth: 3,
									stemColor: '#A63400',
									stemDashStyle: 'dot',
									stemWidth: 1,
									whiskerColor: '#3D9200',
									whiskerLength: '20%',
									whiskerWidth: 3
								}
							},
							series: [{
								name: id,
								data: data.ev
							},
								{
									name: 'Outlier',
									color: Highcharts.getOptions().colors[0],
									type: 'scatter',
									marker: {
										fillColor: 'white',
										lineWidth: 1,
										lineColor: Highcharts.getOptions().colors[0]
									},
									tooltip: {
										pointFormat: 'FPKM: {point.y}'
									}
								}]
						});
					}
				});


			})

	</script>
}